<template>
  <div>
    <brack :params1="'商品管理'" :params2="'添加商品'"></brack>
    <el-card class="box-card">
      <el-alert title="添加商品信息" center type="info" show-icon> </el-alert>
      <!-- 步骤条 -->
      <el-steps :space="250" finish-status="success" :active="+activename">
        <el-step title="基本信息"></el-step>
        <el-step title="商品参数"></el-step>
        <el-step title="商品属性"></el-step>
        <el-step title="商品图片"></el-step>
        <el-step title="商品内容"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>
      <!-- tab栏 -->
      <el-tabs :tab-position="tabPosition" style="height: 600px;" v-model="activename" :before-leave="beforeleave">
        <el-tab-pane label="基本信息" name="0">
          <el-form ref="sizeForm" :model="sizeForm" label-width="80px" size="mini" :rules="rules">
            <el-form-item label="活动名称" prop="name">
              <br />
              <el-input v-model="sizeForm.name"></el-input>
            </el-form-item>
            <el-form-item label="商品价格" prop="plice">
              <br />
              <el-input v-model="sizeForm.price"></el-input>
            </el-form-item>
            <el-form-item label="商品重量" prop="weight">
              <br />
              <el-input v-model="sizeForm.weight"></el-input>
            </el-form-item>
            <el-form-item label="商品数量" prop="num">
              <br />
              <el-input v-model="sizeForm.num"></el-input>
            </el-form-item>
            <el-form-item label="商品分类" prop="seeoptions">
              <br />
              <el-cascader :options="options" :props="props" v-model="sizeForm.seeoptions" @change="change1"></el-cascader>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="商品参数" name="1">
          <div v-for="(item, index) in manylist" :key="index">
            <p style="line-height: 70px">{{ item.attr_name }}</p>
            <el-checkbox border checked>{{ item.attr_vals }}</el-checkbox>
          </div>
        </el-tab-pane>

        <el-tab-pane label="商品属性" name="2">
          <div v-for="(item2, index) in onlylist" :key="index">
            <p style="line-height: 70px">{{ item2.attr_name }}</p>
            <el-input value="item2"></el-input>
          </div>
        </el-tab-pane>
        <el-tab-pane label="商品图片" name="3">
          <el-upload class="upload-demo" :action="URL" :headers="headers" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" list-type="picture">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-tab-pane>
        <el-tab-pane label="商品内容" name="4">商品内容</el-tab-pane>
      </el-tabs>
      <!-- 图片弹出层 -->
      <el-dialog title="提示" :visible.sync="dialogVisible" width="50%" height="50%" :before-close="handleClose">
        <img :src="src" alt="" style="width:300px" />
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { categoriesSort_api, categories_api, upload_api } from '@/api'
export default {
  data() {
    return {
      // 弹出层开关
      dialogVisible: false,
      activename: '0',
      tabPosition: 'left',
      name: '0',
      options: [],
      props: {
        children: 'children',
        label: 'cat_name',
        value: 'cat_id'
      },
      sizeForm: {
        name: '',
        price: 0,
        weight: 0,
        num: 0,
        seeoptions: [2227, 2304, 2313],
        pics: []
      },
      rules: {
        name: [
          { required: true, message: '请输入商品名', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        price: [
          { required: true, message: '请输入商品价格', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        weight: [
          { required: true, message: '请输入商品重量', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        num: [
          { required: true, message: '请输入商品重量', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        seeoptions: [
          { required: true, message: '请输入商品重量', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]
      },
      manylist: [],
      onlylist: [],
      fileList: [],
      URL: 'http://klxin.cn:8888/api/private/v1/upload',
      src: '',
      headers: {
        Authorization: window.sessionStorage.getItem('token')
      }
    }
  },
  created() {
    //获取级联选择器数据
    this.getparams()
  },
  methods: {
    async getparams() {
      const { data: res } = await categoriesSort_api({ type: 3 })
      //console.log(res)
      this.options = res.data
      // console.log(this.options)
    },
    beforeleave(a, b) {
      // console.log(this.sizeForm.seeoptions)
      //判断是否点击第一个以外的
      if (a != 0) {
        //判断是否选择了商品分类
        if (this.sizeForm.seeoptions.length != 3) {
          this.$message({
            type: 'success',
            message: '请先选择商品分类!'
          })
          return false
        } else {
          //判断点击的是第二个tab
          if (a == 1) {
            console.log(1111)
            this.getGoodsList(this.sizeForm.seeoptions[2], 'many')
          }
          //判断点击的是第三个
          if (a == 2) {
            console.log(2222)
            this.getGoodsList(this.sizeForm.seeoptions[2], 'only')
          }
          return true
        }
      }
      console.log(a, 111)
      console.log(b, 222)
    },
    //表单事件
    change1() {
      console.log(this.sizeForm.seeoptions)
    },
    async getGoodsList(id, sel) {
      const { data: res } = await categories_api({ id: id, sel: sel })
      console.log(res, 99999)
      //判断是only  还是many
      res.data.forEach(item => {
        if (item.attr_sel == 'only') {
          this.onlylist.push(item)
        } else {
          this.manylist.push(item)
        }
      })
      console.log(this.onlylist, 111111)
      console.log(this.manylist, 2222222)
      // this.manylist = res.data
      // console.log(this.manylist)
    },
    // 图片上传
    handleRemove(file, fileList) {
      console.log(file, 1111, '删除掉的值')
      console.log(fileList, 2222, '返回的是新的值')
      var newArr = []
      //获取删除后的图片
      fileList.forEach(item => {
        newArr.push({ pic: item.response.data.tmp_path })
      })
      //  将最后删除后的图片数据重新赋值给 pic数组
      this.sizeForm.pics = newArr

      console.log(this.ruleForm, 777666)
    },
    handlePreview(file) {
      console.log(file, 2222)
      //1.显示对话框
      //2. 将图片显示在对话框中并且显示
      this.dialogVisible = true

      this.src = file.url
    },
    //上传成功后的钩子

    handleSuccess(response, file, fileList) {
      console.log(response, file, fileList)
    },
    handleClose() {}
  }
}
</script>
<style scoped lang="less">
.el-card {
  margin-top: 20px;
}
.el-dialog__body {
  display: flex;
}
</style>
